<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Guangxi Map</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="chartsDOM" style="width:800px;height:600px;"></div>

<script>
    // 初始化统计图对象
    var myChart = echarts.init(document.getElementById('chartsDOM'));
    // 显示 loading 动画
    myChart.showLoading();

    // 获取广西地图数据
    getGuangXiMap().then(res => {
        // 得到结果后，关闭动画
        myChart.hideLoading();
        // 注册地图(数据放在axios返回对象的data中哦)
        echarts.registerMap('GX', res.data);
        var option = {
            series: [
                {
                    name: '广西地图',
                    type: 'map',
                    map: 'GX', // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
                    label: {
                        show: true
                    }
                }
            ]
        };
        myChart.setOption(option);
    }).catch(error => {
        console.error('Error fetching Guangxi map data:', error);
    });
</script>
</body>
</html>
